
import React from 'react';
import { Form } from "antd";
import * as THREE from 'three';
import Vector3Input from "components/Vector3Input";

/** 物体的局部缩放 */
export default function Scale(props: { object3D: THREE.Object3D<THREE.Event> }) {

    const { object3D } = props;

    const [scale, setScale] = React.useState(new THREE.Vector3(object3D.scale.x, object3D.scale.y, object3D.scale.z))

    const onChangeScale = React.useCallback((e: THREE.Vector3) => {
        if (!object3D) return;
        object3D.scale.set(e.x, e.y, e.z);
    }, [object3D])

    React.useEffect(() => {
        const t = setInterval(() => {
            if (!object3D) return;
            if (object3D.scale.x !== scale.x || object3D.scale.y !== scale.y || object3D.scale.z !== scale.z) {
                setScale(new THREE.Vector3(object3D.scale.x, object3D.scale.y, object3D.scale.z))
            }
        }, 30);
        return () => {
            clearInterval(t);
        }
    }, [object3D, scale.x, scale.y, scale.z])

    return (
        <Form.Item label='缩放' tooltip='物体的局部缩放' >
            <Vector3Input
                value={scale}
                onChange={onChangeScale}
            />
        </Form.Item>
    )
}